<template>
    <a-card
        id="sqlite-test"
        hoverable
        :tabList="tabList"
        :activeTabKey="tabKey"
        @tabChange="onTabChange"
    >
        <template>
            <keep-alive>
                <template v-if=" tabKey == 'input' ">
                    <div class="input-area">
                        <div class="tool-bar-area">
                            <a-button size="small" @click="sqlQuery">查询</a-button>
                            <a-button size="small" @click="sqlRun">执行</a-button>
                        </div>
                        <a-textarea v-model="statement"></a-textarea>
                    </div>
                </template>

                <template v-else-if=" tabKey == 'result' ">
                    <div class="result-frame">
                        <div class="result-selecter">
                            <a-radio-group size="small" v-model="sql_current_index">
                                <a-radio-button
                                    v-for="n in sql_source_result.length"
                                    :value="n-1"
                                    :key="n"
                                >{{ n }}</a-radio-button>
                            </a-radio-group>
                        </div>

                        <div class="result-area" @scroll="resultScroll">
                            <div>
                                <table class="result-table">
                                    <thead>
                                        <tr>
                                            <th
                                                v-for="({title}) in sql_columns"
                                                :key="title"
                                                :style="{top:result_scroll_top+'px'}"
                                            >
                                                <div class="float-title">{{ title }}</div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(row, index) in sql_result" :key="index">
                                            <td
                                                v-for="({dataIndex}, c_idx) in sql_columns"
                                                :key="index+'_'+c_idx"
                                            >{{ row[dataIndex] }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </template>
            </keep-alive>
        </template>
    </a-card>
</template>

<style lang="less">
#sqlite-test {
    height: 100%;
    display: flex;
    flex-direction: column;

    // > .ant-card-head {
    // }
    > .ant-card-body {
        position: relative;
        flex: 1;
        padding: 15px;

        .input-area {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;

            .tool-bar-area {
                text-align: right;
                margin-bottom: 8px;
            }

            textarea {
                flex: 1;
                resize: none;
            }
        }

        .result-frame {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .result-selecter {
                flex: 0;
                margin-bottom: 8px;
            }

            .result-area {
                flex: 1;
                overflow: auto;
                height: 1px;

                @border-color: rgb(179, 179, 179);
                table.result-table {
                    min-width: 100%;
                    border: 1px solid @border-color;
                    > thead {
                        > tr {
                            background: #dddddd;
                            > th {
                                position: relative;
                                border: 1px solid @border-color;
                                .float-title {
                                    display: block;
                                    margin: -2px -2px;
                                    background: #dddddd;
                                    border: 1px solid @border-color;
                                }
                            }
                        }
                    }
                    > tbody {
                        > tr {
                            &:nth-child(2n) {
                                background: #eee;
                            }
                            > td {
                                padding: 2px 2px;
                                border: 1px solid @border-color;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>

<script lang="ts" src="./Sqlite.vue.ts">
</script>


